<template>
  <el-form
    :model="formData"
    :rules="rules"
    label-position="left"
    label-width="80px"
    ref="setpOneForm"
  >
    <!--        第一行-->
    <el-row>
      <el-col :span="6">
        <el-form-item label="商品名称" prop="name">
          <el-input
            v-model.trim="formData.name"
            placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="7" :offset="1">
        <el-form-item label="商品类别" prop="category">
          <el-cascader
            v-model="formData.category"
            :options="categoryTree"
            :props="{
              expandTrigger: 'hover',
              label: 'name',
              value: 'id',
              checkStrictly: false,
              emitPath: false,
            }"
          ></el-cascader>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="是否上架" prop="is_published">
          <div style="height: 40px; display: flex; align-items: center">
            <el-switch v-model="formData.is_published"></el-switch>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    <!--        第二行-->
    <el-row>
      <el-col :span="6">
        <el-form-item label="商品原价" prop="price">
          <el-input-number :min="0" v-model="formData.price"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="商品售价" prop="sale_price">
          <el-input-number
            :min="0"
            v-model="formData.sale_price"
          ></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>
    <!--        第三行-->
    <el-row>
      <el-col :span="6">
        <el-form-item label="商品库存" prop="stock">
          <el-input-number :min="0" v-model="formData.stock"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="商品副标题" label-width="90px" prop="subtitle">
          <el-input placeholder="副标题" v-model="formData.subtitle"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="商品描述" label-width="80px">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入商品描述"
            v-model="formData.short_desc"
          >
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  name: "SetpOne",
  props: ["formObj", "progress", "categoryTree"],
  data() {
    return {
      formData: this.formObj,
      // 表单验证
      rules: {
        name: [
          { required: true, message: "必须填写商品名称", trigger: "blur" },
        ],
        category: [
          { required: true, message: "请先选择商品的类别", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    formData: {
      deep: true,
      handler(value) {
        // 修改父级 formData
        this.$emit("update:formObj", value);
      },
    },
  },
};
</script>

<style scoped></style>
